<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderCustom('创建工作流',~{::style})">
<style>
    .file-footer-caption {
        margin-bottom: 5px!important;
    }
    .file-drop-zone-title {
        padding: 25px 10px!important;
    }
</style>
</head>
<body>
<div class="ch-container">
    <div class="row">
        <div id="content" class="col-md-12 col-sm-12" style="padding:2px;width: 99%;">
            <div class="row">
                <div class="box col-sm-12" style="margin-top:5px;" >
                    <form class="form-horizontal" >
                        <fieldset style="border-top: 1px solid rgb(229, 229, 229);-webkit-padding-start: 25px">
                            <legend style="text-align: left;font-size: 14px;border: 0;width: auto;margin-bottom: auto;"><span style="font-weight:bold;">课程信息</span></legend>
                            <div class="form-group">
                                <label class="control-label col-sm-1" style="margin-right: 10px;">上课老师:</label>
                                <div class="col-sm-2">
                                    <input name="teacherLogin" class="form-control" readonly th:value="${classInfo.teacherLogin}">
                                    <input name="teacherId" type="hidden" th:value="${classInfo.teacherId}">
                                </div>
                                <label class="control-label col-sm-2" style="margin-right: 10px;">上课时间:</label>
                                <div class="col-sm-2">
                                    <input name="classTime" class="form-control" readonly th:value="${#dates.format(classInfo.classTime,'yyyy/MM/dd H:mm:ss')}">
                                </div>
                                <label class="control-label col-sm-2" style="margin-right: 10px;">上课学生:</label>
                                <div class="col-sm-2">
                                    <input name="studentLogin" class="form-control" readonly th:value="${classInfo.studentLogin}">
                                    <input name="studentId" type="hidden" th:value="${classInfo.studentId}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-1" style="margin-right: 10px;">课程状态:</label>
                                <div class="col-sm-2">
                                    <span th:switch="${classInfo.classState}">
                                        <input class="form-control" readonly th:case="1" th:value="待上课">
                                        <input class="form-control" readonly th:case="2" th:value="已完成">
                                        <input class="form-control" readonly th:case="3" th:value="已旷课">
                                        <input class="form-control" readonly th:case="4" th:value="已取消">
                                    </span>
                                    <input name="classState" type="hidden" th:value="${classInfo.classState}">
                                </div>
                                <label class="control-label col-sm-2" style="margin-right: 10px;">上课教材:</label>
                                <div class="col-sm-6">
                                    <input name="material" class="form-control" readonly th:value="${classInfo.material}">
                                </div>

                            </div>
                        </fieldset>
                        <fieldset style="border-top: 1px solid rgb(229, 229, 229);-webkit-padding-start: 25px">
                            <legend style="text-align: left;font-size: 14px;border: 0;width: auto;"><span style="font-weight:bold;">录入信息</span></legend>
                            <div class="form-group">
                                <label class="control-label col-sm-2 col-lg-1"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>工作流类型:</label>
                                <div class="col-sm-6">
                                    <select name="processSettingId" id="processSettingId" class="form-control" onchange="getQuestionList($(this).val())">
                                        <option value="" >选择工作流类型</option>
                                        <option th:each="item:${listType}" th:value="${item.processSettingId}" th:text="${item.processName}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-1"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>问题分类:</label>
                                <div class="col-sm-6">
                                    <select name="questionTypeId" id="questionTypeId" class="form-control">
                                        <option value="" >选择问题分类</option>
                                    </select>
                                </div>
                                <label class="control-label col-sm-2"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>是否返还课时:</label>
                                <div class="col-sm-2 radio-inline">
                                    <label><input type="radio" name="returnClass" value="1"> 是</label>&emsp;&emsp;
                                    <label><input type="radio" name="returnClass" value="0" checked> 否</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-1"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>问题描述:</label>
                                <div class="col-sm-10">
                                    <textarea name="content" id="workflowContent" rows="4" class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-1"><i class="fa fa-asterisk fa-1" style="color: red;" title="必填项" aria-hidden="true"></i>附件:</label>
                                <div class="col-sm-10">
                                    <div class="file-loading">
                                        <label>Preview File Icon</label>
                                        <input id="fileUpload" name="uploadFiles" type="file" multiple>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" id="inputHidden">
                                <input type="hidden" name="lessonId" id="lessonId" th:value="${lessonId}">
                                <div class="col-sm-11 text-center" >
                                    <button type="button" class="btn btn-default btn-md" onclick="layerClose()"> 关闭 </button>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button type="button" class="btn btn-warning btn-md" th:onclick="|submitForm()|"> 保存并关闭 </button>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button type="button" class="btn btn-primary btn-md" th:onclick="|continueAdd()|"> 保存并继续添加 </button>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustom(~{::script})">
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/plugins/sortable.min.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/plugins/sortable.min.js}" type="text/javascript"></script>
    <!-- 如果你想在HTML文件预览中净化HTML内容则要引入purify.min.js is   它必须在fileinput.min.js之前引入 -->
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/plugins/purify.min.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/plugins/purify.min.js}" type="text/javascript"></script>
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/fileinput.min.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/fileinput.min.js}"></script>
    <script src="../../static/lib/bootstrap-fileinput/5.0.8/js/locales/zh.js" th:src="@{/static/lib/bootstrap-fileinput/5.0.8/js/locales/zh.js}"></script>
    <script>
        $(function () {
        });

        $("#fileUpload").fileinput({
            language: 'zh',
            // theme: 'fas',
            uploadUrl:'/workflow/upload/attachment',
            uploadAsync: false,
            browseOnZoneClick: true,
            showUpload: false,
            showCaption: false,
            showBrowse: false,
            dropZoneEnabled: true,
            browseClass: "btn btn-primary btn-md",
            fileType: "any",
            // allowedFileTypes: ['image', 'text', 'video', 'audio', 'flash'],
            allowedFileExtensions: ['jpg', 'jpeg', 'gif', 'png', 'txt','log','pdf','xls','doc','xlsx','docx','swf','mp3','wma','wav','rar','zip','mp4'],
            maxFileSize: 51200, //单位为kb，如果为0表示不限制文件大小
            msgSizeTooLarge: '文件 "{name}" (<b>{size} KB</b>) 超过了允许大小 <b>{maxSize} KB</b>.',
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            layoutTemplates: {
                actionUpload: ''//就是让文件上传中的文件去除上传按钮
//      actionDelete: '',//去除删除按钮
            },
            uploadExtraData: {"lessonId":$("#lessonId").val(),"processSettingId":$("#processSettingId").val()},
        }).on('fileuploaded', function(event, data, previewId, index) {
            let response = data.response;
            // $("#inputHidden").append('<input type="hidden" name="listFilePath" value="'+response.listFilePath+'">');
            // alert(response.listFilePath)
        }).on('filebatchuploadcomplete', function(event, files, extra) {
            // alert($("input[name='listFilePath']").length);
            // addWorkflow();
        }).on('filebatchuploadsuccess',function (event, data, previewId, index) {
            // var form = data.form, files = data.files, extra = data.extra,
            //     response = data.response, reader = data.reader;
            // console.log("data: "+ JSON.stringify(data));
            // console.log(data.jqXHR.statusText==="success");
            if (data.jqXHR.statusText==="success"){
                $("#inputHidden").append('<input type="hidden" name="listFilePath" value="'+data.response.listFilePath+'">');
                addWorkflow();
            }else {
                layer.msg("上传文件失败",{icon:2});
            }
        });

        let loadIndex;
        function submitForm() {
            loadIndex = layer.load();
            if ($("#processSettingId").val()===""){
                layer.msg("请选工作流类型",{icon:2});
                layer.close(loadIndex);
                return false;
            }
            if ($("#questionTypeId").val()===""){
                layer.msg("请选择问题分类",{icon:2});
                layer.close(loadIndex);
                return false;
            }
            if ($.trim($("#workflowContent").val())===""){
                layer.msg("请输入问题描述",{icon:2});
                $("#workflowContent").select();
                layer.close(loadIndex);
                return false;
            }
            let filesCount = $('#fileUpload').fileinput('getFilesCount');
            // alert(filesCount);
            if (filesCount>0){
                //上传附件，成功回调方法
                $("#fileUpload").fileinput("upload");
                // $("#fileUpload").fileinput('disable');
            }else {
                let processSettingId=$("#processSettingId").val();
                if ("6" === processSettingId || "7" === processSettingId){
                    addWorkflow();
                }else {
                    layer.msg("请上传附件",{icon:2});
                    layer.close(loadIndex);
                    return false;
                }
            }
            // layer.close(loadIndex);
        }

        function continueAdd() {
            $('form').append("<input type=\"hidden\" value=\"1\" name=\"continueAdd\" id=\"continueAdd\">");
            submitForm();
        }
        
        function addWorkflow() {
            if ($("#processSettingId").val()===""){
                layer.msg("请选工作流类型",{icon:2});
                return false;
            }
            let questionTypeIdVal=$("#questionTypeId").val();
            if ($.trim(questionTypeIdVal)===""){
                layer.msg("请选择问题分类",{icon:2});
                return false;
            }
            let workflowContent=$("#workflowContent").val();
            if ($.trim(workflowContent)===""){
                layer.msg("请描述问题",{icon:2});
                return false;
            }
            $.post("/workflow/create",$("form").serialize(),function (result) {
                if (result.status>0){
                    layer.msg("提交工作流成功",{icon:1},function() {
                        // layerClose();
                        if ($("#continueAdd").length>0 && parseInt($("#continueAdd").val())===1){
                            window.location.reload();
                        }else {
                            parent.window.location.reload();
                        }
                    });
                }else {
                    layer.msg("提交工作流失败，请重试",{icon:2},function() {
                        // layerClose();
                        window.location.reload();
                    });
                }
                layer.close(loadIndex);
            },"json");
        }

        //获取问题类别
        function getQuestionList(processSettingId) {
            $("#questionTypeId").empty();
            $("#questionTypeId").append('<option value="" >选择问题分类</option>');
            if (processSettingId===''){
                return false;
            }
            if (processSettingId==="6" || processSettingId==="7"){
                $("input[name='returnClass'][value='0']").prop("checked",true);
                $("input[name='returnClass']").attr("disabled",true);
            }else {
                $("input[name='returnClass']").attr("disabled",false);
            }
            $("#fileUpload").fileinput('refresh',{uploadExtraData: {"lessonId":$("#lessonId").val(),"processSettingId": processSettingId}});
            let url='/workflow/question/list/'+processSettingId;
            $.post(url,{},function (result,status) {
                if (status==="success"){
                    if (result.status>0){
                        let listQuestion=result.data;
                        if(listQuestion !=null && listQuestion.length>0){
                            let optionHtml ="";
                            for (let i=0;i<listQuestion.length;i++){
                                optionHtml+='<option value="'+listQuestion[i].id+'">'+listQuestion[i].cn_name+'</option>';
                            }
                            $("#questionTypeId").append(optionHtml)
                        }
                    }else {
                        layer.msg("获取取消课程原因失败",{icon:2})
                    }
                }else {
                    layer.msg("请求失败:"+status,{icon:2})
                }
            },"json");
        }

        //关闭当前layer弹出层
        function layerClose() {
            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        }
    </script>
</div>
</body>
</html>